<template>
  <ul class="footer-box">
    <li>
      
      <router-link to="/" exact-active-class="active"><span class="iconfont icon-liwu"></span><br> 首页</router-link>
    </li>
    <li>
      <router-link to="/Category" exact-active-class="active" ><span class="iconfont icon-yejikanban"></span><br>分类</router-link>
    </li>
    <li>
      <router-link to="/ShoppingCar" exact-active-class="active" ><span class="iconfont icon-dianziqiajuan"></span><br>购物车</router-link>
    </li>
    <li>
      <router-link to="/My" exact-active-class="active" ><span class="iconfont icon-mayicaifulogo"></span><br>我的</router-link>
    </li>
  </ul>
</template>

<script>
export default {
    name:"FooterBar"
}
</script>
<style scoped>
  @import url(../assets/iconfonts/iconfont.css);
.footer-box{
  width: 100%;
  height: 3.125rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #fff;;
}
.footer-box li{
  flex: 1;
  height: 100%;
  text-align: center;
}
.active{
  color:red
}
</style>

